import React from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import IconFont from '../resource/iconfont';
import {getRealSize} from '../utils';
import OrderListScreen from '../pages/order/list-screen';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import ThemeStyles from '../styles';
import OrderInfoScreen from '../pages/order/info-screen';
import OrderProductScreen from '../pages/order/product-screen';
import OrderCommentScreen from '../pages/order/comment-screen';
import ChatScreen from '../pages/messages/chat-screen';
import {I18n} from '../reducers/intl';
import {Platform} from 'react-native';

const OrderNavigator = createStackNavigator(
  {
    OrderList: OrderListScreen,
    OrderComment: OrderCommentScreen,
    OrderDetail: createMaterialTopTabNavigator(
      {
        OrderInfoTab: OrderInfoScreen,
        OrderProductTab: OrderProductScreen,
        OrderMessagesTab: ChatScreen,
      },
      {
        initialRouteName: 'OrderInfoTab',
        lazy: true,
        navigationOptions: ({navigation}) => {
          const options = {
            headerBackTitleStyle: Platform.OS === 'ios' && {
              height: 0,
              width: 0,
            },
            title: I18n.t('page.title.orderDetail'),
          };
          return options;
        },
        tabBarOptions: {
          indicatorStyle: {
            ...ThemeStyles.Color.background.primary,
          },
          activeTintColor: ThemeStyles.Color.primary.color,
          inactiveTintColor: ThemeStyles.Color.text.tintGray.color,
          style: {
            ...ThemeStyles.Color.background.white,
          },
        },
      },
    ),
  },
  {
    initialRouteName: 'OrderList',
    navigationOptions: ({navigation}) => {
      const options = {
        headerBackTitleStyle: Platform.OS === 'ios' && {
          height: 0,
          width: 0,
        },
        title: I18n.t('page.title.order'),
        tabBarIcon: ({focused, tintColor}) => (
          <IconFont
            name={focused ? 'molarmenu-order-fill' : 'molarmenu-order-half'}
            color={tintColor}
            size={getRealSize(22)}
          />
        ),
        tabBarVisible: navigation.state.index < 1,
      };
      return options;
    },
  },
);

export default OrderNavigator;
